<template>
  <div style="width: 91%; margin: 20px auto 0">
    <el-button type="primary" @click="addHandle">新增</el-button>
    <el-input
      v-model="input"
      placeholder="请输入搜索的内容"
      style="width: 150px; margin-left: 10px"
    />
    <el-button style="margin-left: 10px" @click="search">搜索</el-button>
    <el-button type="success" @click="backHandle">返回</el-button>
    <el-table
      :data="tableData"
      border
      style="margin-top: 20px"
    >
      <el-table-column prop="title" label="反馈标题" align="center" />
      <el-table-column prop="content" label="反馈内容" />
      <el-table-column prop="time" label="发布时间" width="160" align="center">
        <template slot-scope="scope">
          {{ new Date(scope.row.time).toLocaleString() }}
        </template>
      </el-table-column>
      <el-table-column prop="user.username" label="发布人" align="center" />
      <el-table-column prop="reply" label="回复内容" />
      <el-table-column
        prop="replyTime"
        label="回复时间"
        width="160"
        align="center"
      >
        <template slot-scope="scope">
          {{
            scope.row.replyTime
              ? new Date(scope.row.replyTime).toLocaleString()
              : ""
          }}
        </template>
      </el-table-column>
      <el-table-column prop="staff.name" label="回复人" align="center" />
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row._id)"
          >删除</el-button>
          <el-button
            size="mini"
            type="primary"
            @click="handlereply(scope.row)"
          >回复</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin: auto; width: 50%">
      <el-pagination
        :current-page="page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="count"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import service from '../../api/messages'
export default {
  name: 'Messages',
  data() {
    return {
      tableData: [],
      input: '',
      page: 1,
      limit: 5,
      count: 0
    }
  },
  mounted() {
    this.get()
  },
  methods: {
    get() {
      service.getMessage({ page: this.page, limit: this.limit }).then((res) => {
        this.tableData = res.rows
        this.count = res.count
      })
    },
    // 删除
    handleDelete(value) {
      service.deleteMessage(value).then(() => {
        this.get()
      })
    },
    // 回复
    handlereply(value) {
      console.log(value)
      this.$router.push({ path: '/messages/reply', query: { value }})
    },
    // 新增
    addHandle() {
      this.$router.push('/messages/addMessage')
    },
    // 搜索
    search() {
      console.log(this.input)
      this.tableData = this.tableData.filter((item) => {
        return item.user.username === this.input
      })
      console.log(this.tableData)
    },
    // 返回
    backHandle() {
      service.getMessage().then((res) => {
        this.tableData = res
        this.input = ''
      })
    },
    handleSizeChange(val) {
      this.limit = val
      this.get()
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.page = val
      this.get()
      // console.log(`当前页: ${val}`);
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
